<template>
<!-- 阅读页 -->
    <div class="readboss">
        <fullscreen :fullscreen.sync="fullscreen">
            <div :class="['read-item',{'con':!model}]" >
            <!-- 头部固定 -->
            <div :class="['topbox',{'con':display}]">
                <div class="read-top">
                    <div class="menu">
                    <router-link to="/home">看漫画</router-link><span class="">></span><a @click="addtz">龙腾战尊</a>
                    </div>
                    <div class="chapter">
                        预告
                    </div>
                    <div class="personal">
                        <div class="r-box2 ">
                        <img src="../assets/img/visitor.png" alt="" class="headPortrait" v-show="!logor" >
                        <img src="../assets/img/tx001.jpeg" alt="" class="headPortrait" v-show="logor" @click="addmy">
                        <!-- 鼠标悬浮 弹出登录 -->
                        <div class="catear">
                            <div class="mylogon">
                                <h2 v-show="!logor">游客</h2>
                                <div v-show="logor" class="logonid">
                                    <h2>@瓜呆</h2>
                                    <p>ID:279842212</p>
                                </div>
                                <ul class="clearfix">
                                    <li>
                                        <img src="../assets/img/my01.png" alt="">
                                        <span>钻石</span>
                                        <span>0</span>
                                    </li> 
                                    <li>
                                        <img src="../assets/img/my02.png" alt="">
                                        <span>金币</span>
                                        <span>0</span>
                                    </li> 
                                    <li>
                                        <img src="../assets/img/my03.png" alt="">
                                        <span>推荐票</span>
                                        <span>0</span>
                                    </li> 
                                    <li>
                                        <img src="../assets/img/my04.png" alt="">
                                        <span>月票</span>
                                        <span>0</span>
                                    </li> 
                                </ul>
                                <button @click="logon" v-show="!logor"><i class="cat-top"></i>登录</button> 
                                <button @click="logout" v-show="logor"><i class="cat-top"></i>退出登录</button> 
                            </div>
                        </div>
                    </div>

                        <div class="Collection" @click="addColl">
                            <div class="Coll-one" v-show="Coll">
                                <i class="ift-shoucangkongxinx" ></i>收藏
                            </div>
                            <div class="Coll-twe" v-show="!Coll">
                                <i class="ift-shoucangshixinx" ></i>已收藏
                            </div>
                        </div>

                        <div class="bookshelf">
                            <i class="ift-shujiax"></i>书架
                            <div class="catear">
                                <div class="mylogon">
                                    <img src="../assets/img/book.png" alt="">
                                    <p>主人,不收藏漫画怎么追更呢~</p>
                                    <a href="">去找找漫画</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="content-box" @click="adddisplay">
                <div class="content" ref="content">
                    <div>
                        <img src="../assets/imgxq/1.jpg-kmh.middle.webp" alt="">
                    </div>
                    <div>
                        <img src="../assets/imgxq/2.jpg-kmh.middle.webp" alt="">
                    </div>
                    <div>
                        <img src="../assets/imgxq/3.jpg-kmh.middle.webp" alt="">
                    </div>
                    <div>
                        <img src="../assets/imgxq/4.jpg-kmh.middle.webp" alt="">
                    </div>
                    <div>
                        <img src="../assets/imgxq/5.jpg-kmh.middle.webp" alt="">
                    </div>
                </div>
            </div>
            <!-- 底部固定 -->
            <div :class="['bottombox',{'con':display}]">
                <div class="read-bottom">
                        <div class="controller">
                            <!-- 全屏 -->
                            <div class="bot-left" >
                                <div class="screen" @click="addentire">
                                    <i class="top-left"></i>
                                    <i class="top-right"></i>
                                    <i class="bottom-left"></i>
                                    <i class="bottom-right"></i>
                                    全屏
                                </div>
                                <div class="bigorsmall">
                                    <span class="small" @click="addsmall">-</span>
                                    <span class="text" ref="text">默认</span>
                                    <span class="big" @click="addbig">+</span>
                                </div>
                            </div>
                            <!-- 滑块 -->
                            <div class="slider">
                                <span ref="spantext">{{spantext}}</span>
                                <div class="slider-box">
                                    <div class="box-block">
                                        <div class="box-mb" ref="boxmb">
                                        </div>
                                        <i ref="hk"></i>
                                    </div>
                                </div>
                                <div class="slider-item">
                                    <i class="ift-read-chapter-prev"></i>
                                    <p>上一话</p>
                                </div>
                                <div class="slider-item">
                                    <i class="ift-read-chapter-next"></i>
                                    <p>下一话</p>
                                </div>
                            </div>
                            <!-- 模式 -->
                            <div class="pattern">
                                <div class="pattern-list">
                                    <div class="pattern-item" v-show="model" @click="addmodel">
                                        <i class="ift-read-moon"></i>
                                        <p>夜间模式</p>
                                    </div>
                                    <div class="pattern-item" v-show="!model" @click="addmodel">
                                        <i class="ift-read-sun"></i>
                                        <p>日间模式</p>
                                    </div>
                                    <div class="pattern-item">
                                        <i class="ift-read-scroll-left-right"></i>
                                        <p>左右翻页</p>
                                    </div>
                                    <div class="pattern-item" @click="addtimer">
                                        <i class="ift-read-scroll-auto"></i>
                                        <p>自动滚动</p>
                                    </div>
                                    <div class="pattern-item">
                                        <i class="ift-read-catalog"></i>
                                        <p>章节目录</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
            </div>
        </fullscreen>
        
        <!-- 登录组件 -->
        <loginitem v-show="loginstate" @loginmethod="loginmethod"></loginitem>
    </div>
</template>

<script>
import loginitem from "../components/LoginAssembly.vue" ;

    export default {
        data() {
            return {
                Coll: true, // 判断收藏点击
                model:true, // 模式切换 日月
                display:false,// 两个固定是否显示
                num:0,// 图片大小
                widthdata:800,// 图片大小
                fullscreen:false,
                logor:false,// 登录状态
                loginstate:false,// 登录页面显示
                img:[

                    {
                        imgurl:"../assets/img-xq/1.jpg-kmh.middle.webp"
                    },
                    {
                        imgurl:"../assets/img-xq/2.jpg-kmh.middle.webp"
                    },
                    {
                        imgurl:"../assets/img-xq/3.jpg-kmh.middle.webp"
                    },
                    {
                        imgurl:"../assets/img-xq/4.jpg-kmh.middle.webp"
                    },
                    {
                        imgurl:"../assets/img-xq/5.jpg-kmh.middle.webp"
                    },
                ],
                top:null,
                timer:null,// 定时器
                readid:null,
                spantext:"0/10",
                
            };
        },
        methods:{
            addtz(){
                let id = this.readid;
                this.$router.push({path:"/details", query: { id } })
            },
            // 收藏点击事件
            addColl(){
                this.Coll = !this.Coll;
            },
            // 模式切换 日月
            addmodel(){
                this.model = !this.model
            },
            // 两个固定是否显示
            adddisplay(){
                this.display = !this.display
            },
            // 全屏
             addentire(){
                this.fullscreen = !this.fullscreen
            },
            // 图片大小
            addbig(){
                 if(this.num < 5){
                    this.num = this.num + 1 ;
                    let x = this.num;
                    let y = 100 + x*10;
                    this.widthdata =this.widthdata +  800 *0.1 ;
                    this.$refs.content.style.width = this.widthdata + "px"
                    if(this.num == 0){
                        this.$refs.text.innerHTML = "默认";
                    }else{
                        this.$refs.text.innerHTML = y+"%";
                    }
                    // console.log(this.$refs.content.style.width);
                    // console.log(this.$refs.text.innerHTML);
                    // console.log(this.num);
                }
            },
            addsmall(){
                  if(this.num >-5){
                    this.num =this.num - 1 ;
                    let x = this.num;
                    let y = 100 + x*10 ;
                    this.widthdata =this.widthdata - 800 *0.1 ;
                    this.$refs.content.style.width = this.widthdata + "px"
                    if(this.num == 0){
                        this.$refs.text.innerHTML = "默认";
                    }else{
                        this.$refs.text.innerHTML = y+"%";
                    }
                    // console.log(this.$refs.content.style.width);
                    // console.log(this.$refs.text.innerHTML);
                    // console.log(this.num);
                }
            },
             // 登录按钮 点击事件
           logon(){
                let key = window.localStorage.getItem("username");
                if(key){
                    this.$router.push( {path:"/micenter"})
                }else{
                    this.loginmethod();
                    window.localStorage.setItem("userstate",this.logor)
                }
           },
            // 退出登录
           logout(){
                this.logor =!this.logor
                window.localStorage.removeItem("username");
                window.localStorage.removeItem("userId");
                window.localStorage.removeItem("userstate");
                this.$router.push( {path:"/home"})
           }, 
           // 登录组件
            loginmethod(){
                this.loginstate = !this.loginstate;
                window.localStorage.removeItem("userstate");
            },
           addmy(){
                this.$router.push({path: "/micenter"})
           },
           // 定时器
           addtimer(){
                if(!this.timer){
                   this.timer = setInterval(() => {
                    this.top +=5
                    window.scrollTo(0,this.top)
                    }, 10); 
                    this.display = !this.display
                }else{
                     clearInterval(this.timer);
                     this.timer = null; 
                }
           },
           

        },
        created(){
            // 获取路由传参id
             if("id" in this.$route.query){
                let {id} =this.$route.query;
                this.readid = id;
            }
            console.log(this.readid);
            // 通过id判断收藏状态
            let readarr = JSON.parse(window.localStorage.getItem("Collection"));
            console.log(readarr);
            if(readarr){
                let num = readarr.findIndex(item=>{
                    return item.obj.id == this.readid
                })
                if(num == -1){
                    console.log(num);
                }else{
                    this.Coll = !this.Coll;
                    console.log(num);
                }
            }

            let userstate = window.localStorage.getItem("userstate");
            if(userstate){
                this.logor = userstate
            }
            // console.log(userstate);

            
        },
        // 获取浏览器滚轮
        mounted() {
            window.addEventListener('scroll', () => {
                this.top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
            });
            console.log( document.body.scrollHeight);
    
        },
        beforeDestroy(){
            clearInterval(this.timer) 
        },
        
        watch:{
            // 监听top值的变化
            top(newValue){
                let bokmb = this.$refs.boxmb;
                let hk = this.$refs.hk;
                let x = newValue * 300 / document.body.scrollHeight;
                let y = newValue * 300 / document.body.scrollHeight;
                
                if ( x<260 && y<260) {
                    hk.style.left = x +"px"
                    bokmb.style.width = y +"px"
                    let text = Math.round (x / 260 * 10);
                    this.$refs.spantext.innerHTML = text + "/10";
                }else{
                    x = 260;
                    y = 260;
                    hk.style.left = x +"px"
                    bokmb.style.width = y +"px"
                    let text = Math.round (x / 260 * 10);
                    this.$refs.spantext.innerHTML = text + "/10";
                }

                console.log(newValue);
            }
            
               
        },
        components:{
            loginitem
        }
    }
</script>

<style lang="scss" scoped>

.read-item{
    width: 100%;
    background-color: #fff;
    z-index: 1;
}
.read-item.con{
    width: 100%;
    background-color: #333;
    z-index: 1;
}
.topbox{
    width: 100%;
    height: 64px;
    background-color: #333333;
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    transition: all 0.5s linear 0s;
}
.topbox.con{
    width: 100%;
    height: 64px;
    background-color: #333333;
    position: fixed;
    top: -64px;
    left: 0;
    right: 0;
    z-index: 10;
    transition: all 0.5s linear 0s;
}
.topbox .read-top{
    width: 1328px;
    height: 64px;
    padding: 0px 8px;
    margin: 0 auto;
    background-color: #333333;
}
.topbox .read-top .menu{
    float: left;
    width: 33%;
    height: 64px;
}
.topbox .read-top .menu a{
    font-size: 14px;
    color: #fff;
    line-height: 64px;
}
.topbox .read-top .menu a:hover{
    font-size: 14px;
    color: #fc6976;
    line-height: 64px;
    cursor: pointer;
}
.topbox .read-top .menu span{
    font-size: 14px;
    color: #fff;
    line-height: 64px;
    padding: 0px 6px;
}
.topbox .read-top .chapter {
    float: left;
    width: 33% ;
    height: 64px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 64px;
}
.topbox .read-top .personal {
    float: left;
    width: 33% ;
    height: 64px;
    color: #fff;
    font-size: 14px;
    line-height: 64px;
    text-align: right;
}
.topbox .read-top .personal .r-box2{
    display: inline-block;
    padding: 0 6px;
    text-align: center;
    line-height: 56px;
}
.topbox .read-top .personal .Collection{
    display: inline-block;
    padding: 0 6px;
    z-index: 10;
    cursor: pointer;
}
.topbox .read-top .personal .Collection i{
    margin-right:5px ;
}
.topbox .read-top .personal .bookshelf{
    display: inline-block;
    padding: 0 6px;
}
.topbox .read-top .personal .bookshelf i{
    margin-right:5px ;
}
.Coll-twe i{
    color: #fc6976;
}

.bottombox{
    width: 100%;
    height: 64px;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    bottom: 0px;
    left: 0;
    transition: all 0.5s linear 0s;
}
.bottombox.con{
    width: 100%;
    height: 64px;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    bottom: -64px;
    left: 0;
    z-index: 10;
    transition: all 0.5s linear 0s;
}
.bottombox .read-bottom{
    width: 1200px;
    height: 64px;
    margin: 0 auto;
}
.bottombox .read-bottom .bot-left{
    float: left;
    width: 240px;
    height: 46px;
    color: #fff;
    font-size: 14px;
   
}
.bottombox .read-bottom .bot-left .screen{
    float: left;
    width: 28px;
    height: 26px;
    padding: 0 6px;
    color: #fff;
    font-size: 14px;
    margin: 18px 14px 0 0;
    line-height: 26px;
    position: relative;
     cursor: pointer;
}
 .read-bottom .bot-left .screen .top-left{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 8px;
    border-top:1px solid #fff ;
    border-left:1px solid #fff ; 
}
 .read-bottom .bot-left .screen .top-right{
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 8px;
    border-top:1px solid #fff ;
    border-right:1px solid #fff ; 
}
 .read-bottom .bot-left .screen .bottom-right{
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 8px;
    border-bottom:1px solid #fff ;
    border-right:1px solid #fff ; 
}
 .read-bottom .bot-left .screen .bottom-left{
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 10px;
    height: 8px;
    border-bottom:1px solid #fff ;
    border-left:1px solid #fff ; 
}

.bigorsmall{
    float: left;
    width: 136px;
    height: 26px;
    margin: 18px 14px 0 0;
    border: 1px solid #fff;
    border-radius: 13px;
    line-height: 26px;
    text-align: center;
}
.bigorsmall .small{
    display: inline-block;
    width: 36px;
    height: 26px;
    cursor: pointer;
}
.bigorsmall .big{
    display: inline-block;
    width: 36px;
    height: 26px;
    cursor: pointer;
}
.bigorsmall .text{
    display: inline-block;
    width: 62px;
    height: 26px;
    border-left:1px solid #fff ;
    border-right:1px solid #fff ;
}
// 滑块
.slider{
    float: left;
    width: 540px;
    height: 64px;
    color: #fff;
    line-height: 64px;
    span{
        font-size: 14px;
    }
    .slider-box{
        display: inline-block;
        width: 270px;
        height: 14px;
        padding: 0 7px;
        margin: 0 10px;
        vertical-align: middle;
        .box-block{
            width: 270px;
            height: 4px;
            background-color: #999;
            border-radius: 2px;
            position: relative;
            margin-top:5px ;
            .box-mb{
                width: 0;
                height: 4px;
                background-color: #000;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
            }
            i{
                display: block;
                width: 16px;
                height: 16px;
                background-color: #fff;
                border-radius:50% ;
                position: absolute;
                left: 0;
                top: -5px;
                 z-index: 20;
            }
        }
    }
    .slider-item{
            display: inline-block;
            width: 42px;
            height: 46px;
            margin-left:18px ;
            padding-top:12px ;
            text-align: center;
            vertical-align: bottom;
            cursor: pointer;
            i{
                float: left;
                width: 16px;
                height: 16px;
                line-height: 14px;
                margin-left:13px ;
            }
            p{
                float: left;
                font-size: 14px;
                width: 100%;
                height: 24px;
                line-height: 24px;
            }
    }
}
// 模式
.pattern{
    float: left;
    width: 420px;
    height: 59px;
    .pattern-list{
        float: right;
        width: 296px;
         .pattern-item{
            display: inline-block;
            width: 56px;
            height: 46px;
            margin-left:18px ;
            padding-top:12px ;
            text-align: center;
            color: #fff;
            cursor: pointer;
            i{
                display:inline-block;
                width: 16px;
                height: 16px;
            }
            p{
                font-size: 14px;
                width: 100%;
                height: 28px;
                line-height: 28px;
            }
         }
         .pattern-item:nth-child(3){
            cursor: not-allowed;
            color:#666;
         }
    }
}

// 内容
.content-box{
    width: 100%;
}
 .content{
    width: 800px;
    margin: 0 auto;
 }
 .content img{
    width: 100%;
 }

// 登录
.r-box2{
    position: relative;
    
}
.r-box2:hover .headPortrait{
    width: 80px;
    height: 80px;
    border: 1px solid #fc6c79;
    position: absolute;
    left: 0;
    z-index: 100;
}
.r-box2:hover .catear{
    display: block;
    z-index: 10;
}
.r-box2 .catear{
    width: 248px;
    height: 211px;
    padding: 38px 8px 0px;
    background: url(../assets/img/bg-cat-main.png) 0px 0px no-repeat  ;
    background-size: 100%;
    position: absolute;
    top: 54px;
    left: -90px;
    display: none;
}
.r-box2 .catear .mylogon{
    width: 246px;
    height: 193px;
    padding-top: 16px;
    border: 1px solid #FFB5C3;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: inset 0 1px 4px 0 #ffd1d8;
}
.r-box2 .catear .mylogon h2{
    width: 100%;
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-size:14px;
    color: #666;
    font-weight: 400;
}
.r-box2 .catear .mylogon ul{
    width: 210px;
    height: 64px;
    padding: 6px 0px;
    margin: 0 auto;
}
.r-box2 .catear .mylogon ul li{
    float: left;
    width: 105px;
    height: 32px;
    color: #666;
    padding: 0;
    line-height: 32px;
    text-align: left;

}
.r-box2 .catear .mylogon ul li img{
    width: 24px;
    height: 24px;
    margin-right: 2px;
}
.r-box2 .catear .mylogon ul li span{
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin-right:2px ;
}
.r-box2 .catear .mylogon  button{
    width: 200px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    border-radius: 16px;
    margin: 0 auto;
    border: 0;
    background-image: linear-gradient(0deg,#fc6976,#FC4F71 42%,#FFB5C3);
    position: relative;
}
.r-box2 .catear .mylogon  button:hover{
    box-shadow:0 0 10px 2px #ea9ca2;
}
.r-box2 .catear .mylogon button i{
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../assets/img/cat-stand2.png);
  background-size: 100%;
  position: absolute;
  left: 88px;
  top: -22px;
}
.r-box2 .catear .mylogon .logonid{
    width: 100%;
    height: 36px;
    text-align: center;
    font-size:14px;
    color: #666;
    font-weight: 400;
}
.r-box2 .catear .mylogon .logonid h2{
    width: 100%;
    height: 18px;
    line-height: 18px;
}
.r-box2 .catear .mylogon .logonid p{
    width: 100%;
    height: 18px;
    line-height: 18px;
}

// 书架
.bookshelf {
    position: relative;
    
}
.bookshelf:hover .catear{
    display: block;
    z-index: 10;
}
.bookshelf:hover a{
    color: #fc6976;
}
.bookshelf .catear{
    width: 248px;
    height: 211px;
    padding: 38px 8px 0px;
    background: url(../assets/img/bg-cat-main.png) 0px 0px no-repeat  ;
    background-size: 100%;
    position: absolute;
    top: 49px;
    left: -108px;
    text-align: center;
    display: none;
}
.bookshelf .catear .mylogon{
    width: 222px;
    height: 144px;
    padding: 12px;
    border: 1px solid #FFB5C3;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: inset 0 1px 4px 0 #ffd1d8;
}
.bookshelf .catear .mylogon img{
    width: 80px;
    height: 80px;
    margin: 0px 71px 20px;
}
.bookshelf .catear .mylogon p{
    width: 100%;
    height: 20px;
    color: #999;
    font-size: 12px;
    line-height: 20px;
}
.bookshelf .catear .mylogon a{
    // display: inline-block;
    width: 100%;
    height: 24px;
    color: #fc6976;
    font-size: 14px;
    line-height: 24px;
    vertical-align: top;
}
</style>